import { Form, Input, Select, Space } from "antd"
import ImageGroup, { ImageGroupValidator } from "@/components/FormItems/ImageGroup"
import { CategoryType } from "@/constants/enums/category"
import { queryCategory } from "@/services/common"
import { useRequest } from "ahooks"
import { history } from '@umijs/max'

const GoodsBasicInfo: React.FC = () => {
  const category = useRequest(() => queryCategory({type: CategoryType.商城}))

  return (
    <>
      <Form.Item label='商品名称' name='goodsName' rules={[{required: true, message: '请输入商品名称'}]}>
        <Input placeholder="请输入" style={{width: 320}} />
      </Form.Item>
      <Form.Item label='商品分组' required>
        <Space>
          <Form.Item noStyle name='goodsCategory' rules={[{required: true, message: '请选择商品分组'}]}>
            <Select
              placeholder="请选择" style={{width: 320}} loading={category.loading}
              options={category.data?.data.map(it => ({label: it.categoryName, value: it.categoryId}))}
            />
          </Form.Item>
          <a onClick={() => history.push('/mall/physical/group')}>新建</a>
          <div>|</div>
          <a onClick={() => category.refresh()}>刷新</a>
        </Space>
      </Form.Item>
      <Form.Item label='商品图片' name='goodsShow' required rules={[{validator: (_, val) => ImageGroupValidator('请上传商品图片', val)}]}>
        <ImageGroup style={{width: 600}} tips={['第一张图片默认作为商品主图展示']} max={9} accept="image/jpg, image/png, video/*" />
      </Form.Item>
      <Form.Item label='商品描述' name='goodsDesc'>
        <Input.TextArea style={{width: 320}} placeholder="请输入" rows={3} showCount maxLength={250} />
      </Form.Item>
      <Form.Item label='商品详情' name='goodsDetail' required rules={[{validator: (_, val) => ImageGroupValidator('请上传商品详情图片', val)}]}>
        <ImageGroup max={18} style={{width: 600}} tips={['最多可上传 18 张图片']} />
      </Form.Item>
    </>
  )
}

export default GoodsBasicInfo
